<template>
  <div class="container">
    <div class="poster-model">
      <div class="poster-bar">
        <div class="swiper-bar">
          <swiper class="banner-swiper"
                  previous-margin="30px"
                  next-margin="30px"
                  :current="current_poster"
                  @change="toggle_poster">
            <!-- 样式1 -->
            <swiper-item class="banner-item"
                         v-for="(item, index) in poster_list"
                         :key="index">
              <div class="swiperbox"
                   :class=" current_poster!== index?'banner-scale':''">
                <img :src="item"
                     v-if="item"
                     mode="widthFix"
                     alt=""
                     class="img">
              </div>
            </swiper-item>

          </swiper>
          <!-- <swiper :current="current_poster"
                  @change="toggle_poster">
            <block v-for="(item, index) in poster_list"
                   :key="index">
              <swiper-item>
                <div class="poster-pic">
                  <img :src="item"
                       v-if="item"
                       mode="widthFix"
                       alt=""
                       class="img">
                </div>

              </swiper-item>
            </block>
          </swiper> -->
        </div>
        <ul class="slider">
          <li class="slider-item"
              :class="{'active':current_poster==index}"
              v-for="(item, index) in poster_list"
              :key="index"></li>
        </ul>
      </div>
      <div class="bottom-bar">
        <!-- 分享微信好友 -->
        <div class="share-btn">
          <button open-type="share"
                  class="real-btn">
          </button>
          <img :src="img_url+'/mp_3.2.2/wx_share.png'"
               v-if="img_url"
               mode="widthFix"
               alt=""
               class="share-logo">
          <div class="btn-msg">
            微信好友
          </div>
        </div>
        <!-- 保存海报 -->
        <div class="share-btn"
             @tap.stop="save_poster()">
          <img :src="img_url+'/mp_3.2.2/download.png'"
               v-if="img_url"
               mode="widthFix"
               alt=""
               class="share-logo">
          <div class="btn-msg">
            保存此图片
          </div>
        </div>
      </div>
      <div class="tip-bar">
        保存图片到手机相册后，可以奖励图片分享到您的圈子
      </div>
      <div class="close-btn"
           @tap="close_poster()">
        ×
      </div>
    </div>
  </div>
</template>

<script>
import common from "@/assets/js/mmk_common.js";

export default {
  data () {
    return {
      img_base: common.image_response,
      img_url: common.image_resource,
      current_poster: 0,
    }
  },
  methods: {
    close_poster () {
      this.$emit("close_poster")
    },
    save_poster () {
      let poster = this.poster_list[this.current_poster]
      console.log(poster);
      let that = this
      wx.downloadFile({
        url: poster, // 下载资源的 url
        success: result => {
          wx.saveImageToPhotosAlbum({
            filePath: result.tempFilePath, //图片文件路径，可以是临时文件路径也可以是永久文件路径，不支持网络图片路径,
            success: res => {
              wx.showToast({
                title: '海报保存成功', //提示的内容,
                icon: 'success', //图标,
                duration: 1500, //延迟时间,
                mask: true, //显示透明蒙层，防止触摸穿透,
                success: res => {
                  that.show_poster = false
                }
              });
            },
            fail: (err) => {
              console.log(err);
              wx.showToast({
                title: "海报保存失败", //提示的内容,
                icon: 'none', //图标,
                duration: 1500, //延迟时间,
                mask: true, //显示透明蒙层，防止触摸穿透,
                success: res => { }
              });
            },
            complete: () => { }
          });
        },
        fail: (err) => {
          console.log(err);
          wx.showToast({
            title: '海报下载失败', //提示的内容,
            icon: 'none', //图标,
            duration: 1500, //延迟时间,
            mask: true, //显示透明蒙层，防止触摸穿透,
            success: res => { }
          });
        },
        complete: () => { }
      });

    },
    toggle_poster (e) {
      this.current_poster = e.mp.detail.current
    },
  },
  props: ["poster_list"]
}
</script>

<style lang="less" scoped>
.container {
  .poster-model {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.71);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    display: flex;
    flex-direction: column;
    .poster-bar {
      flex: 1;
      margin-top: 80px;
      position: relative;
      display: flex;
      flex-direction: column;
      .swiper-bar {
        margin: 0 38px 39px;
        flex: 1;
        .banner-swiper {
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          border-radius: 5px;
          .banner-item {
            width: 80%;
            padding: 0 8px;
            box-sizing: border-box;
            border-radius: 5px;
            position: relative;
            .swiperbox {
              width: 100%;
              height: 100%;
              border-radius: 5px;
              overflow: scroll;
              // overflow: hidden;
              transition: all 0.1s linear;
              position: relative;
              .img {
                width: 100%;
                display: block;
              }

              .zhanwei {
                height: 109px;
                width: 100%;
                .bottomImg {
                  width: 100%;
                  height: 109px;
                  display: block;
                }
              }
           
            }
          }
          .banner-scale {
            transform: scaleY(0.9) !important;
            transform-origin: center center !important;
            position: relative;
            opacity: 0.65;
            overflow: hidden;
          }
        }
        // ._swiper-item {
        //   overflow-y: auto !important;
        // }
        // .poster-pic {
        //   width: 100%;
        //   .img {
        //     width: 100%;
        //   }
        // }
        // swiper {
        //   height: 100% !important;
        // }
      }
      .slider {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        .slider-item {
          width: 5px;
          height: 5px;
          border-radius: 50%;
          background: rgba(183, 183, 183, 1);
          margin: 0 4px;
          display: inline-block;
          vertical-align: middle;
          transition: all 0.5s;
          &.active {
            width: 18px;
            height: 5px;
            background: rgba(255, 255, 255, 1);
            border-radius: 3px;
          }
        }
      }
    }
    .bottom-bar {
      margin: 30px 66px 16px;
      display: flex;
      justify-content: space-around;
      .share-btn {
        width: 55px;
        position: relative;
        .share-logo {
          width: 100%;
        }
        .btn-msg {
          font-size: 12px;
          font-family: "PingFangSC-Regular", "PingFang SC";
          font-weight: 400;
          color: rgba(255, 255, 255, 1);
          text-align: center;
          margin-top: 1px;
          white-space: nowrap;
        }
        .real-btn {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          opacity: 0;
          z-index: 10;
        }
      }
    }
    .tip-bar {
      font-size: 12px;
      font-family: "PingFangSC-Regular", "PingFang SC";
      font-weight: 400;
      color: rgba(153, 153, 153, 1);
      line-height: 17px;
      text-align: center;
      margin-bottom: 42px;
    }
    .close-btn {
      width: 26px;
      height: 26px;
      background: rgba(0, 0, 0, 0.641);
      color: rgba(255, 255, 255, 1);
      border-radius: 50%;
      font-size: 22px;
      line-height: 26px;
      text-align: center;
      position: absolute;
      top: 40px;
      right: 22px;
    }
  }
}
</style>